<template>
  <div class="bread-crumb">
    <el-breadcrumb separator="">
      <div v-for="item in routers" :key="item.path" :class="isActive(item) ? 'active' : ''" class="bread-crumb-item">
        <el-breadcrumb-item :to="{ path: item.meta.path }">
          <template #default>
            <div>
              <span>{{ item.name }}</span>
            </div>
          </template>
        </el-breadcrumb-item>
        <span class="icon-close" v-if="item.path !== '/main'" @click="CloseRoute(item)">
          <el-icon :size="10">
            <IconPark :icon="CloseSmall" />
          </el-icon>
        </span>
      </div>
    </el-breadcrumb>
  </div>
</template>

<script setup lang="ts">
import IconPark from "./IconPark.vue";
import { CloseSmall } from "@icon-park/vue-next";
import { Ref, onMounted, ref, watch } from "vue";
import { useRoute, RouteLocationMatched, useRouter } from "vue-router";
import { uniqBy, remove, last } from "lodash";
import { pathToRegexp } from "path-to-regexp";

const route = useRoute();
const router = useRouter();

const routers: Ref<RouteLocationMatched[]> = ref([]);

const isActive = (routeitem: RouteLocationMatched) => {
  return routeitem.meta.path === route.path;
};

const GetBreadCrumb = () => {
  //利用loadsh的uniqBy去除相同元素
  route.matched.forEach((item) => {
    const Reg = pathToRegexp(item.path);
    if (Reg.test(route.path)) {
      item.meta.path = route.path;
    }
  })
  routers.value = uniqBy(routers.value.concat(route.matched), "path");
};

//关闭标签的处理
const CloseRoute = (routeitem: RouteLocationMatched) => {
  remove(routers.value, item => routeitem.meta.path === item.meta.path);
  if(route.path === routeitem.meta.path) router.push(last(routers.value).meta.path);
}

//监听路由变化
watch(
  () => route.path,
  () => GetBreadCrumb()
);

onMounted(() => {
  GetBreadCrumb();
});
</script>

<style scoped lang="less">
.bread-crumb {
  display: flex;
  align-items: center;
  width: 97%;
  height: 40px;
  margin: 5px 0;
  border-radius: 3px;
  padding: 0 5px;
  background-color: #f5f7fa;
  border: 1px solid #e6e8ec;

  .el-breadcrumb {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .bread-crumb-item {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: 1px solid #d8dce5;
    background: #fff;
    padding: 5px 5px;
    margin-left: 5px;
    border-radius: 2px;

    /deep/.el-breadcrumb__separator {
      display: none;
    }

    div {
      display: flex;
      align-items: center;
      color: #495060;
      font-size: 10px;
      font-weight: 300;
      cursor: pointer;

      span {
        margin-left: 2px;
      }
    }

    &.active {
      background-color: #2a97d1;
      border-color: #2a97d1;

      div,
      span {
        color: #fff;
      }

      &::before {
        content: "";
        background: #fff;
        width: 5px;
        height: 5px;
        border-radius: 50%;
      }
    }

    .icon-close {
      display: flex;
      width: 10px;
      height: 10px;
      vertical-align: middle;
      border-radius: 50%;
      text-align: center;
      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
      transform-origin: 100% 50%;
      margin-left: 2px;

      &:before {
        transform: scale(0.6);
      }

      &:hover {
        background-color: #b4bccc;
        color: #fff;
      }
    }
  }
}
</style>
